<template>
  <div id="client">
    <p style="margin-left: 20px">
      客户：
      <el-input
        style="width: 200px; margin-left: 0px; margin-right: 20px"
        placeholder="请输入客户编号"
        v-model="salesOrder.clientName"
        clearable
        disabled
      >
      </el-input>
      <el-button
        style="margin-left: -20px; margin-right: 10px"
        @click="dialogFormVisible3 = true"
        >...</el-button
      >
      &nbsp;&nbsp;&nbsp; 销售人员：
      <el-select
        v-model="salesOrder.saler"
        placeholder="销售人员"
        style="width: 100px"
        disabled
      >
        <el-option
          v-for="item in salemen"
          :key="item.employeeId"
          :label="item.employeeName"
          :value="item.employeeCode"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;
      <span class="documentDate">单据日期：</span>
      <el-date-picker
        v-model="salesOrder.documentDate"
        type="datetime"
        placeholder="选择日期时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        disabled
      >
      </el-date-picker
      >&nbsp;&nbsp;&nbsp; 地址
      <el-select
        v-model="salesOrder.address"
        placeholder="地址"
        style="width: 200px"
        disabled
      >
        <el-option
          v-for="item in addresses"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;
    </p>
    <el-divider></el-divider>
    <div style="margin-bottom: 20px; margin-right: 20px; float: right">
      <el-button type="primary" @click="toExamine()">审核</el-button
      >&nbsp;&nbsp;&nbsp;
      <el-button type="warning">反审核</el-button>&nbsp;&nbsp;&nbsp;
    </div>
    <div style="margin-top: 30px">
      <el-table
        height="300px"
        :data="tableData"
        border
        style="width: 100%; font-size: 13px"
        @current-change="handleCurrentChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="removeRow(scope.$index)"
              >删除</el-button
            >
            <el-button size="mini" @click="addRow">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="gid" label="商品" width="230">
          <template slot-scope="scope">
            <el-input
              style="width: 120px; margin-left: 10px; margin-right: 20px"
              placeholder="请输入商品"
              v-model="scope.row.goodname"
              clearable
              disabled
            ></el-input>
            <el-button
              style="margin-left: -20px; margin-right: 10px; width: 50px"
              @click="goodsShow = true"
              >...</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="imagename" label="图片" width="120">
        </el-table-column>
        <el-table-column prop="unitname" label="基本单位" width="120">
        </el-table-column>
        <el-table-column prop="totalNum" label="基本数量" width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.totalNum"
              placeholder="请输入"
              clearable
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="仓库" width="120">
          <template slot-scope="scope">
            <el-select v-model="scope.row.defaultStock" disabled>
              <el-option
                v-for="store in storeList"
                :key="store.shId"
                :label="store.storeHomeName"
                :value="store.shId"
                disabled
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="giveGoods" label="交货日期" width="200">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.giveGoods"
              type="datetime"
              placeholder="请选择交货日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              disabled
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="unitCost" label="单价/元" width="120">
        </el-table-column>
        <el-table-column prop="discount" label="折扣率%" width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.discount"
              placeholder="请输入折扣率"
              disabled
            >
              clearable ></el-input
            >
          </template>
        </el-table-column>
        <el-table-column prop="tax" label="税率%" width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.tax"
              placeholder="请输入税率"
              disabled
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="折后含税单价/元" width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.totalPrice"
              placeholder="请输入折后含税单价"
              clearable
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              placeholder="请输入备注"
              clearable
              disabled
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="addRow">添加行</el-button>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="暂无备注信息"
        v-model="salesOrder.remark"
        style="width: 100%; line-height: 20px"
        disabled
      >
      </el-input>
      <p style="margin-top: 20px">
        总金额（元）
        <el-input
          style="width: 200px; margin-left: 10px; margin-right: 20px"
          placeholder="请输入总金额"
          v-model="salesOrder.totalMoney"
          disabled
          clearable
        >
        </el-input
        >&nbsp;&nbsp; 本次收款（元）：<el-input
          style="width: 200px; margin-left: 10px; margin-right: 20px"
          placeholder="本次收款"
          v-model="salesOrder.received"
          clearable
          disabled
        >
        </el-input
        >&nbsp;&nbsp; 结算账户：
        <el-select
          v-model="salesOrder.account"
          placeholder="结算账户"
          style="width: 100px"
          disabled
        >
          <el-option
            v-for="item in accounts"
            :key="item.accountCode"
            :label="item.aTypeName"
            :value="item.accountCode"
          >
          </el-option>
        </el-select>
      </p>
      <p style="margin-top: 20px; width: 1350px">
        &nbsp;&nbsp; 本次欠款（元）：<el-input
          style="width: 200px; margin-left: 10px; margin-right: 20px"
          placeholder="本次欠款"
          v-model="salesOrder.nownopay"
          clearable
          disabled
        >
        </el-input
        >&nbsp;&nbsp;&nbsp; <span class="demonstration">收款到期日：</span>
        <el-date-picker
          v-model="salesOrder.payDueDate"
          type="datetime"
          placeholder="收款到期日"
          value-format="yyyy-MM-dd HH:mm:ss"
          disabled
        >
        </el-date-picker>
      </p>

      <p style="margin-top: 20px; margin-right: 20px; height: 100px">
        <span style="display: inline-block; float: right">
          <el-button @click="goto('SaleOrderList')">历史单据</el-button
          >&nbsp;&nbsp; <el-button>操作日志</el-button></span
        >
      </p>
    </div>

    <el-dialog top="20px" title="选择客户" :visible.sync="dialogFormVisible3">
      <ClientChoose
        ref="customerCode"
        :dialogFormVisible3="dialogFormVisible3"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="yesCustomer">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
      <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsShow = false">取 消</el-button>
        <el-button type="primary" @click="yesGoods">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GoodsChoose from "../public_com/GoodsChoose.vue";
import ClientChoose from "../public_com/ClientChoose.vue";

export default {
  name: "SaleOrder",
  components: {
    GoodsChoose,
    ClientChoose,
  },
  data() {
    return {
      taskId: "",
      storeList: [],
      goodsShow: false,
      salesOrder: {
        documentNum: "",
        clientName: "",
        remark: "",
        prepared: "", // 制单职员编号
        documentDate: "", // 销货单据日期
        id: "",
        totalPay: "",
        account: "",
        logisticsNum: "",
        customerExpenses: "",
        customerNum: "", // 客户编号
        saler: "", // 销售人员编号
        address: "", // 地址
        totalMoney: "", // 总金额
        received: "", // 本次收款
        nownopay: "", //本次欠款
        payDueDate: "", // 收款到期日
      },

      // 销售人员列表伪数据
      salemen: [],
      id: "",
      // 地址列表伪数据
      addresses: [
        { id: "1", name: "地址1" },
        { id: "2", name: "地址2" },
        { id: "3", name: "地址3" },
      ],
      accounts: [],
      dialogFormVisible1: false,
      dialogFormVisible: false,
      dialogFormVisible3: false,
      tableData: [
        {
          gid: "",
          type: 1,
          goodname: "",
          unitname: "",
          unitId: "",
          stockId: "",
          totalNum: "",
          totalPrice: "",
          tax: "",
          discount: "",
          giveGoods: "",
          unitCost: "",
          defaultStock: "",
          oid: "",
        },
      ],
    };
  },
  created() {
    this.getSaler();
    if (
      this.$route.query.billCode != "" &&
      this.$route.query.billCode != null
    ) {
      var documentNum = this.$route.query.billCode;
      this.getSaleOrder(documentNum);
      this.taskId = this.$route.query.taskId;
    }
  },
  methods: {
    toExamine() {
      this.axios({
        url: "/erp/sale/salesOrder/complete",
        params: {
          taskId: this.taskId,
        },
      }).then((rs) => {
        if (rs.data.result == true) {
          alert("审核成功！");
        } else {
          alert("审核失败！");
        }
      });
    },
    getAccounts: function () {
      this.axios({
        url: "/info/account/selectAll",
      })
        .then((rs) => {
          this.accounts = rs.data.accounts;
          console.log(this.accounts);
        })
        .catch((error) => {
          console.error("请求失败", error); // 在控制台输出错误信息
        });
    },
    getbyOid(oid) {
      this.axios({
        url: "/erp/sale/saleOrderDetails/getByOid",
        params: {
          oid,
        },
      }).then((rs) => {
        this.tableData = rs.data.result;
      });
    },
    getSaleOrder(documentNum) {
      this.axios({
        url: "/erp/sale/salesOrder/getByNum",
        params: {
          documentNum,
        },
      })
        .then((rs) => {
          this.salesOrder = rs.data.salesOrder;
          console.log("salesOrder", this.salesOrder);
          this.id = rs.data.salesOrder.id;
          this.getbyOid(this.id);
        })
        .catch((error) => {
          console.error("请求失败", error); // 在控制台输出错误信息
        });
    },
    getSaler() {
      this.axios({
        url: "/info/employee/listAll",
      })
        .then((rs) => {
          // 处理成功的响应
          this.salemen = rs.data.list;
          this.getStoreList();
          this.getAccounts();
          console.log("saleMan", rs.data);
        })
        .catch((error) => {
          console.error("请求失败", error); // 在控制台输出错误信息
        });
    },

    goto(to) {
      this.$router.push(to);
    },
    getStoreList() {
      this.axios
        .get("/info/storeHouse/getAllStore", {
          params: {
            cId: 1,
          },
        })
        .then((rs) => {
          this.storeList = rs.data.storeList;
        });
    },
  },
};
</script>

<style scoped>
.el-button el-button--default el-popover__reference {
  margin-right: 20px;
}

tr {
  border: 1px solid black;
}
</style>